<template>
	<view>
		<u-select v-model="show" :mode="mode" :list="selectList" :labelName="labelName" :title="title" :maxNum="maxNum"
			:childName="childName" :valueName="valueName" :cancel-text="cancelText" :confirmText="confirmText"
			@cancel="$emit('cancel',$event)" @confirm="$emit('confirm',$event)" />
	</view>
</template>

<script>
	/**
	 * select 列选择器
	 * @description 此选择器用于单列，多列，多列联动的选择场景。(从1.3.0版本起，不建议使用Picker组件的单列和多列模式，Select组件是专门为列选择而构造的组件，更简单易用。)
	 * @tutorial http://vkuviewdoc.fsq.pub/components/select.html
	 * @property {String} mode 模式选择，"single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式
	 * @property {Array} list 列数据，数组形式，见官网说明
	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
	 * @property {String} cancel-color 取消按钮的颜色（默认#606266）
	 * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
	 * @property {String} confirm-text 确认按钮的文字
	 * @property {String} cancel-text 取消按钮的文字
	 * @property {String} default-value 提供的默认选中的下标，见官网说明
	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
	 * @property {String Number} z-index 弹出时的z-index值(默认10075)
	 * @property {String} value-name 自定义list数据的value属性名 1.3.6
	 * @property {String} label-name 自定义list数据的label属性名 1.3.6
	 * @property {String} child-name 自定义list数据的children属性名，只对多列联动模式有效 1.3.7
	 * @property {String Number} maxNum 自定义列数
	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
	 * @example <auto-select ref="list" :list="list" />
	 */
	export default {
		name: "auto-select",
		emits: ["confirm", "cancel"],
		props: {
			list: {
				default: ''
			},
			// 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动
			mode: {
				type: String,
				default: 'mutil-column-auto'
			},
			// 自定义value属性名
			valueName: {
				type: String,
				default: 'value'
			},
			// 自定义label属性名
			labelName: {
				type: String,
				default: 'label'
			},
			// 自定义多列联动模式的children属性名
			childName: {
				type: String,
				default: 'children'
			},
			// 顶部标题
			title: {
				type: String,
				default: ''
			},
			// 取消按钮的文字
			cancelText: {
				type: String,
				default: '取消'
			},
			// 确认按钮的文字
			confirmText: {
				type: String,
				default: '确认'
			},
			maxNum: {
				type: [String, Number],
				default: ''
			},
			api: {
				default: ''
			},
			apiParams: {
				default: ''
			},
		},
		data() {
			return {
				selectList: this.list || [],
				show: false
			};
		},
		methods: {
			open(data) {
				if (data) this.selectList = data
				if (this.list) this.selectList = this.list
				if (this.selectList.length) return this.show = true
				if (!this.api) return
				this.$request(this.api, this.apiParams).then(res => {
					this.selectList = res.data
					this.show = true
				})
			},
		}
	}
</script>

<style lang="scss">

</style>